.ph-datetime-layer{
    justify-content: flex-start;
    align-items: flex-start;
    overflow: auto;
}

.ph-datetime-container{
    min-width: calc(var(--phx) * 19.599847);
    font-size: var(--ph-fs-small);
    display: flex;
    flex-direction: column;
    box-shadow: 1px 1px var(--ph-15) rgb(0 0 0 / 40%);
    overflow: hidden;
    z-index: 15000;
    --ph-dt-bd:#00000011;
    --ph-dt-header-color:var(--ph-c-light);
    --ph-dt-footer-bg:var(--ph-light-l2);
    --ph-dt-body-bg:var(--ph-light-l2);
    &.ph-datetime-dark{
        --ph-dt-header-bg: var(--ph-dark-d1);
        --ph-dt-footer-bg: var(--ph-dark-d1);
        --ph-dt-body-bg: var(--ph-dark-d1);
        --ph-dt-footer-action:var(--ph-dark);

        --ph-dt-bd:#ffffff14;
        --ph-dt-cell-imp:var(--ph-c-light);
        --ph-dt-header-color:var(--ph-c-l2);
        --ph-dt-footer-color:var(--ph-c-l2);
        --ph-dt-body-color:var(--ph-c-l2);

        --ph-dt-cell:var(--ph-dark-l1);
        --ph-dt-cell-side:var(--ph-dark);
        --ph-dt-cell-hover:var(--ph-dark);
        --ph-dt-cell-active:var(--ph-theme);
    }
    &.ph-datetime-light{
        --ph-dt-cell-imp:var(--ph-red);

        --ph-dt-header-bg:var(--ph-light-l1);
        --ph-dt-footer-bg:var(--ph-light-l1);
        --ph-dt-body-bg:var(--ph-light-light);
        --ph-dt-footer-action:var(--ph-light-light);

        --ph-dt-header-color:var(--ph-c);
        --ph-dt-footer-color:var(--ph-c);
        --ph-dt-body-color:var(--ph-c);

        --ph-dt-cell:var(--ph-light-l2);
        --ph-dt-cell-side:var(--ph-light);
        --ph-dt-cell-hover:var(--ph-light);
        --ph-dt-cell-active:var(--ph-theme);
        --ph-dt-cell-disabled:var(--ph-light);
        td{
            border: 1px solid var(--ph-dt-cell-side);
        }
    }
    &.ph-datetime-primary{
        --ph-dt-cell-imp:var(--ph-blue-d2);
        --ph-dt-header-bg:var(--ph-blue);
        --ph-dt-footer-action:var(--ph-blue);

        --ph-dt-cell:var(--ph-blue-bga3);
        --ph-dt-cell-active:var(--ph-blue);
        --ph-dt-cell-side:var(--ph-blue-bga1);
        --ph-dt-cell-hover:var(--ph-blue-bga1);
    }
    &.ph-datetime-success{
        --ph-dt-cell-imp:var(--ph-green-d2);
        --ph-dt-header-bg:var(--ph-green);
        --ph-dt-footer-action:var(--ph-green);

        --ph-dt-cell:var(--ph-green-bga3);
        --ph-dt-cell-active:var(--ph-green);
        --ph-dt-cell-side:var(--ph-green-bga1);
        --ph-dt-cell-hover:var(--ph-green-bga1);
    }
    &.ph-datetime-danger{
        --ph-dt-cell-imp:var(--ph-red-d2);
        --ph-dt-header-bg:var(--ph-red);
        --ph-dt-footer-action:var(--ph-red);

        --ph-dt-cell:var(--ph-red-bga3);
        --ph-dt-cell-active:var(--ph-red);
        --ph-dt-cell-side:var(--ph-red-bga1);
        --ph-dt-cell-hover:var(--ph-red-bga1);
    }
    &.ph-datetime-warning{
        --ph-dt-cell-imp:var(--ph-orange-d2);
        --ph-dt-header-bg:var(--ph-orange);
        --ph-dt-footer-action:var(--ph-orange);

        --ph-dt-cell:var(--ph-orange-bga3);
        --ph-dt-cell-active:var(--ph-orange);
        --ph-dt-cell-side:var(--ph-orange-bga1);
        --ph-dt-cell-hover:var(--ph-orange-bga1);
    }
    
    .ph-action-bar{
        border: none;
        height: calc(var(--phx) * 2.9196);
    }
    .ph-dt-body{
        position: relative;
        overflow-x: hidden;
        flex: 0 0 auto;
        background-color: var(--ph-dt-body-bg);
        color: var(--ph-dt-body-color);
    }
    .ph-dt-header{
        .ph-action{
            opacity: 0.8;
            &:not(:disabled):hover{
                opacity: 1;
            }
        }
        background-color: var(--ph-dt-header-bg);
        color: var(--ph-dt-header-color);
    }
    .ph-dt-footer{
        background-color: var(--ph-dt-footer-bg);
        color: var(--ph-dt-footer-color);
    
        .ph-left,
        .ph-right,
        .ph-center{
            flex: 1;
            white-space: nowrap;
        }
        .ph-right{
            text-align: right;
            .ph-action{
                margin-left: 1px;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .ph-ddt-container{
        .ph-datetime-panel{
            &:first-child,
            &:last-child{
                &:before{
                    content: "";
                    width: 0px;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    background-color: #00000055;
                    box-shadow: 0 0 4px 4px #00000055;
                    z-index: 2;
                }
            }
            &:first-child{
                &:before{
                    right: 6px;
                }
            }
            &:last-child{
                &:before{
                    left: 6px;
                }
            }
        }
    }
    .ph-datetime-container{
        box-shadow:0px -5px var(--ph-15) rgb(0 0 0 / 40%);
        .ph-datetime-panel{
            position: relative;
            width:100%;
            overflow: hidden;
            --ph-dt-panel-padding : var(--ph-10) var(--ph-20);
            --ph-td-width:calc(var(--phx) * 2.7995);
        }
    }
}
@media screen and (min-width: 769px) {
    .ph-ddt-container{
        .ph-datetime-panel:first-child{
            &:before{
                content:"";
                width:1px;
                background-color: var(--ph-dt-bd);
                position: absolute;
                top: calc(var(--phx) * 3.999695);
                bottom: calc(var(--phx) * 1.999847);
                right: 0;
                z-index: 1;
            }
        }
    }
    .ph-datetime-container{
        position:absolute;
        left:0;
        top:0;
        border-radius: 0 0 3px 3px;
        .ph-datetime-panel{
            width:calc(var(--phx) * 19.5998);
            --ph-dt-panel-padding : var(--ph-10);
            --ph-td-width:calc(var(--phx) * 2.79954);
        }
    }
}